<template>
  <el-form :model="chartForm" :rules="formRules" ref="chartFormRef" label-width="120px">
    <!-- 图表类型选择 -->
    <el-form-item label="图表类型" prop="chartType">
      <el-select v-model="chartForm.chartType" placeholder="请选择图表类型" clearable>
        <el-option label="折线图（适合趋势数据，如营收变化）" value="line"></el-option>
        <el-option label="柱状图（适合对比数据，如各季度利润）" value="bar"></el-option>
        <el-option label="饼图（适合占比数据，如成本构成）" value="pie"></el-option>
      </el-select>
    </el-form-item>

    <!-- 图表标题 -->
    <el-form-item label="图表标题" prop="title">
      <el-input v-model="chartForm.title" placeholder="请输入图表标题（如：A公司2021-2023年财报）"></el-input>
    </el-form-item>

    <!-- 折线图/柱状图专用：x轴标签 -->
    <el-form-item label="x轴标签" prop="xLabel" v-if="chartForm.chartType !== 'pie'">
      <el-input v-model="chartForm.xLabel" placeholder="请输入x轴描述（如：年份、季度）"></el-input>
    </el-form-item>

    <!-- 折线图/柱状图专用：y轴标签 -->
    <el-form-item label="y轴标签" prop="yLabel" v-if="chartForm.chartType !== 'pie'">
      <el-input v-model="chartForm.yLabel" placeholder="请输入y轴描述（如：金额（万元）、数量）"></el-input>
    </el-form-item>

    <!-- 数据输入（JSON格式） -->
    <el-form-item label="数据（JSON格式）" prop="data">
      <el-input
        type="textarea"
        v-model="chartForm.data"
        rows="6"
        placeholder="请按以下格式输入数据：
1. 折线图/柱状图：
{
  'x轴数据': ['2021', '2022', '2023'],
  '营收(万元)': [1000, 1500, 2200],
  '利润(万元)': [200, 350, 500]
}

2. 饼图：
{
  '数据': [
    {'name': '营收', 'value': 500},
    {'name': '成本', 'value': 300},
    {'name': '利润', 'value': 200}
  ]
}"
      ></el-input>
      <!-- 格式提示 -->
      <el-alert
        title="提示"
        type="info"
        size="mini"
        show-icon
        style="margin-top: 10px;"
      >
        请严格按照JSON格式输入（可使用在线JSON校验工具检查格式），否则会导致图表生成失败！
      </el-alert>
    </el-form-item>

    <!-- 提交/取消按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">生成图表</el-button>
      <el-button @click="cancelForm" style="margin-left: 10px;">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "ChartForm",
  data() {
    return {
      // 表单数据
      chartForm: {
        chartType: "", // 图表类型：line/bar/pie
        title: "",     // 图表标题
        xLabel: "",    // x轴标签（仅line/bar需要）
        yLabel: "",    // y轴标签（仅line/bar需要）
        data: ""       // JSON格式的字符串数据
      },
      // 表单校验规则
      formRules: {
        chartType: [
          { required: true, message: "请选择图表类型", trigger: "blur" }
        ],
        title: [
          { required: true, message: "请输入图表标题", trigger: "blur" },
          { max: 50, message: "标题长度不能超过50个字符", trigger: "blur" }
        ],
        xLabel: [
          { required: true, message: "请输入x轴标签", trigger: "blur" }
        ],
        yLabel: [
          { required: true, message: "请输入y轴标签", trigger: "blur" }
        ],
        data: [
          { required: true, message: "请输入数据", trigger: "blur" },
          { validator: this.validateJsonFormat, trigger: "blur" } // 自定义JSON校验
        ]
      }
    };
  },
  methods: {
    /**
     * 自定义校验：验证输入的是否为合法JSON，且格式匹配图表类型
     */
    validateJsonFormat(rule, value, callback) {
      try {
        // 1. 先验证是否为合法JSON
        const dataObj = JSON.parse(value);

        // 2. 根据图表类型验证数据格式
        if (this.chartForm.chartType === "pie") {
          // 饼图需要：包含"数据"字段，且为数组，每个元素有name和value
          if (!dataObj.数据 || !Array.isArray(dataObj.数据)) {
            callback(new Error("饼图数据需包含'数据'数组（如：{\"数据\": [{\"name\":\"营收\",\"value\":500}]})"));
            return;
          }
          // 验证每个元素是否有name和value
          const hasInvalidItem = dataObj.数据.some(item => !item.name || item.value === undefined);
          if (hasInvalidItem) {
            callback(new Error("饼图数据数组的每个元素需包含'name'（名称）和'value'（数值）"));
            return;
          }
        } else {
          // 折线图/柱状图需要：包含"x轴数据"字段，且为数组，至少有一个系列数据
          if (!dataObj["x轴数据"] || !Array.isArray(dataObj["x轴数据"])) {
            callback(new Error("折线图/柱状图需包含'x轴数据'数组（如：{\"x轴数据\": [\"2021\",\"2022\"]})"));
            return;
          }
          // 验证是否有至少一个系列数据（排除x轴数据）
          const seriesKeys = Object.keys(dataObj).filter(key => key !== "x轴数据");
          if (seriesKeys.length === 0) {
            callback(new Error("折线图/柱状图需包含至少一个系列数据（如：\"营收(万元)\": [1000, 1500]）"));
            return;
          }
        }

        // 校验通过
        callback();
      } catch (error) {
        // JSON解析失败（格式错误）
        callback(new Error(`JSON格式错误：${error.message}（请检查引号、逗号是否正确）`));
      }
    },

    /**
     * 提交表单：验证通过后，将数据传给父组件（Chat.vue）
     */
    submitForm() {
      this.$refs.chartFormRef.validate((isValid) => {
        if (isValid) {
          // 转换数据为JSON对象（已在校验时验证过，可安全解析）
          const formData = {
            ...this.chartForm,
            data: JSON.parse(this.chartForm.data)
          };
          // 通过事件将数据传给父组件
          this.$emit("submitChartData", formData);
        }
      });
    },

    /**
     * 取消表单：重置表单并通知父组件关闭弹窗
     */
    cancelForm() {
      this.$refs.chartFormRef.resetFields(); // 重置表单
      this.$emit("cancel"); // 通知父组件关闭弹窗
    }
  },
  watch: {
    /**
     * 监听图表类型变化：切换为饼图时，清空x轴/y轴标签的校验（避免必填错误）
     */
    "chartForm.chartType"(newType) {
      const formRef = this.$refs.chartFormRef;
      if (!formRef) return;

      if (newType === "pie") {
        // 饼图不需要x轴/y轴，清空校验和值
        this.chartForm.xLabel = "";
        this.chartForm.yLabel = "";
        formRef.clearValidate(["xLabel", "yLabel"]);
      } else {
        // 折线图/柱状图，重新校验x轴/y轴
        formRef.validate(["xLabel", "yLabel"]);
      }
    }
  }
};
</script>

<style scoped>
/* 调整表单间距 */
.el-form-item {
  margin-bottom: 16px;
}
/* 调整文本域字体（JSON更易读） */
.el-textarea {
  font-family: "Consolas", "Monaco", monospace;
}
</style>
